<template>
  <div class="approval-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="申请人">
          <el-input
            v-model="searchForm.applicant"
            placeholder="请输入申请人"
            clearable
            @clear="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input
            v-model="searchForm.approver"
            placeholder="请输入审批人"
            clearable
            @clear="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      @row-click="handleRowClick"
    >
      <el-table-column
        prop="id"
        label="流程实例ID"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="processDefinitionId"
        label="流程类型"
        min-width="120"
      >
        <template slot-scope="scope">
          {{ getProcessTypeText(scope.row.processDefinitionId) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="variables.initiator"
        label="负责人"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="当前节点"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="assignee"
        label="审批人"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag type="warning">审批中</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click.stop="handleDetail(scope.row)"
          >
            <i class="el-icon-document"></i>
            详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click.stop="handleApproval(scope.row)"
          >
            <i class="el-icon-s-check"></i>
            审批
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>


export default {
  name: 'ApprovalList',
  data() {
    return {
      loading: false,
      searchForm: {
        applicant: '',
        approver: ''
      },
      tableData: [],
    }
  },
  created() {
    this.fetchApprovalData()
  },
  methods: {
    // 获取审批数据
    async fetchApprovalData() {
      try {
        this.loading = true
        const params = {
        }
        
        const response = await this.$get('/workflow/common/tasks', { params })
        console.log(response.data);
        
        if (response && response.result === 200) {
          console.log(response.data);
          
          this.tableData = response.data
        } else {
          this.$message.error(response.message || '获取审批数据失败')
        }
      } catch (error) {
        console.error('获取审批数据出错：', error)
        this.$message.error('获取审批数据失败')
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.fetchApprovalData()
    },

    // 重置搜索
    resetSearch() {
      this.searchForm = {
        applicant: '',
        approver: ''
      }
      this.handleSearch()
    },

    // 获取流程类型文本
    getProcessTypeText(type) {
      const map = {
        "recruit:15:3bf62a93-08d5-11f0-a76d-005056c00001": '招聘需求',
        "entry:4:3ee2b2ed-0b0d-11f0-b6d3-00ff42b17e63": '入职审批',
        'assess:2:d4891ae3-056b-11f0-9217-005056c00001': '绩效考核',
        'interview:1:6e294d7c-0966-11f0-a559-005056c00001':"面试审批",
        'leave:2:c4b921a2-0b0e-11f0-a1e6-00ff42b17e63':"请假审批",
        'dimission:2:144eff51-12fe-11f0-bde3-00ff42b17e63':"离职审批",
        'conversion:1:6c730f29-0b34-11f0-9285-00ff42b17e63':"转正审批"

      }
      return map[type] || '未知'
    },

    // 获取状态文本
    getStateText(state) {
      const map = {
        0: '进行中',
        1: '已完成',
        2: '已驳回',
        3: '已撤销'
      }
      return map[state] || '未知'
    },

    // 获取状态标签类型
    getStateType(state) {
      const map = {
        0: 'warning',
        1: 'success',
        2: 'danger',
        3: 'info'
      }
      return map[state] || ''
    },

    // 行点击处理
    handleRowClick(row) {
      this.handleDetail(row)
    },

    // 查看详情
    handleDetail(row) {
      console.log('查看详情', row)
      // 根据流程类型处理不同的查看详情页面
      if (row.processDefinitionId.includes('recruit')) {
        // 招聘流程
        this.$router.push({
          path: '/recruitment/process-detail',
          query: {
            insId: row.insId,
          }
        })
      } else if (row.processDefinitionId.includes('entry')) {
        // 入职流程
        this.$router.push({
          path: '/entry/process-detail',
          query: {
            insId: row.insId,
            processDefinitionId: row.processDefinitionId,
            staffDetailId: row.variables ? row.variables.staffDetailVO : null,
            taskData: JSON.stringify(row)
          }
        })
      } else if (row.processDefinitionId.includes('performance')) {
        // 绩效评估流程
        this.$router.push({
          path: '/performance/process-detail',
          query: {
            insId: row.insId,
            processDefinitionId: row.processDefinitionId,
            taskData: JSON.stringify(row)
          }
        })
      } else if (row.processDefinitionId.includes('interview')) {
        // 面试
        this.$router.push({
          path: '/recruitment/interview-process',
          query: {
            insId: row.insId,
            processDefinitionId: row.processDefinitionId,
            jobPostingVO: row.variables ? row.variables.jobPostingVO: null,
          }
        })
      }else if (row.processDefinitionId.includes('leave')) {
        // 请假
        this.$router.push({
          path: '/employee/leave-detail',
          query: {
            insId: row.insId,
            processDefinitionId: row.processDefinitionId,
            leaveApplicationVO: row.variables ? row.variables.leaveApplicationVO: null,
            pageType:"view"
          }
        })
      }else if (row.processDefinitionId.includes('dimission')) {
        // 离职
        this.$router.push({
          path: '/employee/resignation-detail',
          query: {
            insId: row.insId,
            processDefinitionId: row.processDefinitionId,
            applicationVO: row.variables ? row.variables.applicationVO: null,
            pageType:"view"
          }
        })
      }else if (row.processDefinitionId.includes('conversion')) {
        // 转正
        this.$router.push({
          path: '/employee/probation-detail',
          query: {
            insId: row.insId,
            processDefinitionId: row.processDefinitionId,
            applicationVO: row.variables ? row.variables.applicationVO: null,
            pageType:"view"
          }
        })
      }else {
        // 其他类型流程
        this.$message.info('该流程暂不支持查看详情')
      }
    },

    handleApproval(row) {
      const processType = row.processDefinitionId;
      
      // 根据流程类型跳转不同的审批界面
      if (processType.includes('recruit')) {
        // 招聘需求
        this.$router.push({
          path: '/recruitment/approval',
          query: { 
            id: row.variables.recruitvo,
            proInsId: row.insId
          }
        });
      } else if (processType.includes('entry')) {
        // 入职审批
        this.$router.push({
          path: '/entry/approval',
          query: { 
            id: row.id,
            proInsId: row.insId,
            staffDetailId: row.variables.staffDetailVO
          }
        });
      } else if (processType.includes('assess')) {
        // 绩效考核
        this.$router.push({
          path: '/performance/approval',
          query: { 
            id: row.id,
            taskData: JSON.stringify(row)
          }
        });
      } else if (processType.includes('interview')) {
        // 面试
        this.$router.push({
          path: '/recruitment/interview-approval',
          query: { 
            id: row.variables.jobPostingVO,
            proInsId: row.insId
          }
        });
      } else if (row.processDefinitionId.includes('leave')) {
        // 请假
        this.$router.push({
          path: '/employee/leave-detail',
          query: {
            insId: row.insId,
            processDefinitionId: row.processDefinitionId,
            leaveApplicationVO: row.variables ? row.variables.leaveApplicationVO: null,
            pageType:"approval"
          }
        });
      }  else if (row.processDefinitionId.includes('dimission')) {
        // 离职
        this.$router.push({
          path: '/employee/resignation-detail',
          query: {
            insId: row.insId,
            processDefinitionId: row.processDefinitionId,
            applicationVO: row.variables ? row.variables.applicationVO: null,
            pageType:"approval"
          }
        });
      }  else if (row.processDefinitionId.includes('conversion')) {
        // 转正
        this.$router.push({
          path: '/employee/probation-detail',
          query: {
            insId: row.insId,
            processDefinitionId: row.processDefinitionId,
            applicationVO: row.variables ? row.variables.applicationVO: null,
            pageType:"approval"
          }
        });
      } else {
        // 未知流程类型
        this.$message.warning('未识别的流程类型');
      }
    }
  }
}
</script>

<style scoped>
.approval-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  min-height: calc(100vh - 120px);
}

.search-bar {
  margin-bottom: 30px;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Vue2 深度选择器语法 */
.el-table >>> .el-table__row {
  cursor: pointer;
}

.el-table >>> .el-table__row:hover {
  background-color: #f5f7fa;
}

.el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

/* 表格上边距 */
.el-table {
  margin-top: 20px;
}

/* 表格内容居中 */
.el-table >>> .el-table__cell {
  text-align: center;
}

/* 标签样式 */
.el-tag {
  margin: 0 2px;
}

/* 按钮样式 */
.el-button--text {
  padding: 0 8px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  padding: 0 8px;
}
</style> 